<template>

  <div>
    <bind-oj-help />
    <el-divider />
    <div class="box-border">
      <div class="content">
        <bind-oj-item
          v-for="(item, index) in OJ"
          :key="index"
          :default-account="item.defaultAccount"
          :img-src="item.imgSrc"
          :oj-name="item.ojName"
        />
      </div>
    </div>
    <div v-show="admin" class="crawler">
      <el-select v-model="ojName" placeholder="请选择爬取OJ">
        <el-option
          v-for="item in OJ"
          :key="item.ojName"
          :label="item.ojName"
          :value="item.ojName"
        />

      </el-select>
      <el-button style="margin-left:20px" type="primary" plain @click="crawler">立即爬取</el-button>
    </div>
  </div>

</template>

<script>
import BindOjItem from '@/views/Setting/BindOjItem'
import BindOjHelp from '@/views/Setting/BindOjHelp'
import { getOjAccount, crawler } from '@/networks/info'

export default {
  name: 'BindOJ',
  components: { BindOjHelp, BindOjItem },
  data() {
    return {
      OJ: [
        { ojName: 'Codeforces', imgSrc: require('@/assets/oj/codeforces.png'), defaultAccount: '没有绑定账号' },
        { ojName: 'NowCoder', imgSrc: require('@/assets/oj/nowcoder.png'), defaultAccount: '没有绑定账号' },
        { ojName: 'VJudge', imgSrc: require('@/assets/oj/vjudge.png'), defaultAccount: '没有绑定账号' },
        { ojName: 'HDU', imgSrc: require('@/assets/oj/hdu.png'), defaultAccount: '没有绑定账号' },
        { ojName: 'LOJ', imgSrc: require('@/assets/oj/loj.png'), defaultAccount: '没有绑定账号' },
        { ojName: 'Luogu', imgSrc: require('@/assets/oj/luogu.png'), defaultAccount: '没有绑定账号' },
        { ojName: 'Leetcode', imgSrc: require('@/assets/oj/leetcode.png'), defaultAccount: '没有绑定账号' }
      ],
      ojName: '',
      admin: false
    }
  },
  created() {
    this.init()

    if (this.$route.query.admin != null) this.admin = true
  },
  activated() {
    if (this.$route.query.admin != null) this.admin = true
    this.init()
  },

  methods: {
    init() {
      getOjAccount()
        .then(res => {
          const data = res.data.data
          data.forEach(item => {
            // if(item.ojName == HDU)
            const index = this.OJ.findIndex(oj => oj.ojName === item.ojName)
            this.OJ[index].defaultAccount = item.account
          })
        })
    },
    crawler() {
      crawler(this.ojName).then(res => {
        this.$message('成功')
      })
    }
  }
}
</script>

<style scoped>

  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .crawler {
    padding: 30px;
  }

  .content:after {
    content: "";
    flex: auto;
  }

  .box-border {
    margin: 20px 15px 20px 0;
  }

</style>
